<script>
export default {
    data() {
        return {
            treeData: [],
            treeKey: Math.random(),
            defaultProps: {
                children: 'children',
                label: 'name',
            }
        }
    },
    mounted() {
        this.getTreeData();
    },
    methods: {
        refresh(){
          this.treeKey = Math.random();
        },
        getTreeData() {
            this.$HttpService.get(`/t-school/findDistrictSchoolClassTree`).then(res => {
                this.treeData = res;
            })
        },
        handleNodeClick(x) {
            this.$emit('clickNode', x, this.treeData)
        },
        renderContent(h, {node, data, store}) {
            let className = '';
            console.log(data.type)
            // if (data.type === 'districtCode') className = 'el-icon-medal'
            if (data.type === 'schoolCode') className = 'el-icon-school'
            if (data.type === 'gradeCode') className = 'el-icon-coin'
            if (data.type === 'classCode') className = 'el-icon-reading'
            return (
                <span class="custom-tree-node">
                    <span><i style="font-weight:600;margin-right:5px" class={className}></i>{node.label}</span>
                    <span><i class="el-icon-s-promotion"></i></span>
                </span>);
        }
    }
}
</script>

<template>
    <div class="dist-out">
        <el-tree :data="treeData"  :render-content="renderContent" :props="defaultProps"
                 node-key="districtCode" :key="treeKey" :default-expanded-keys="['510525000000']" accordion
                 @node-click="handleNodeClick">
        </el-tree>
    </div>
</template>

<style lang="scss" scoped>
::v-deep .is-current {
    .el-tree-node__content {
        color: #13ce66;

        .el-icon-s-promotion {
            display: inline-block !important;
            position: relative;
            left: 66px;
        }
    }

    .el-tree-node__children {
        .el-tree-node__content {
            color: #606266 !important;

            .el-icon-s-promotion {
                display: none !important;
            }
        }
    }
}

::v-deep .el-icon-s-promotion {
    display: none
}

.dist-out {

}
</style>
